<template>
  <div class="conatiner">
    <div class="dir-container">
      <div class="title">文件夹</div>
      <div v-for="dir in dirs" v-bind:key="dir.name" class="dir">
        <div class="img-name-block" v-on:click="_handleClick(dir.name, dir.locked)">
          <img :src="DIR_PNG" alt="dir" style="width: 25px;"/>
          <div>{{ dir.name }}</div>
        </div>
        <div v-if="dir.locked">
          <img :src="LOCK_PNG" alt="lock" style="display: block; width: 20px;"/>
        </div>
      </div>
    </div>
    <div class="file-container">
      <div class="title">文件</div>
      <div v-for="file in files" v-bind:key="file.name" class="file">
        <div class="img-name-block" v-on:click="_handleClick(file.name, file.locked)">
          <img :src="FILE_PNG" alt="file" style="width: 25px;"/>
          <div>{{ file.name }}</div>
        </div>
        <div v-if="file.locked">
          <img :src="LOCK_PNG" alt="lock" style="display: block; width: 20px;"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { URL_FOLD } from '@/config/index'
import DIR_PNG from '@/assets/dir.png'
import FILE_PNG from '@/assets/file.png'
import LOCK_PNG from '@/assets/lock.png'

export default {
  name: 'Fold',
  props: ['path'],
  watch: {
    'path' (newPath) {
      this._getData(newPath)
    }
  },
  data () {
    return {
      dirs: [],
      files: [],
      DIR_PNG,
      FILE_PNG,
      LOCK_PNG
    }
  },
  created () {
    this._getData(this.path)
  },
  methods: {
    _handleClick (fold, locked) {
      this.$emit('enterFold', fold, locked)
    },
    _getData (path) {
      var password = window.sessionStorage.getItem('password') || ''
      fetch(URL_FOLD, {
        method: 'POST',
        body: JSON.stringify({ path: path, password: password }),
        headers: new Headers({
          'Content-Type': 'application/json'
        })
      }).then(res => res.json()).catch(error => console.error('Error:', error)).then(res => {
        if (res.status === 'success') {
          var _dirs = []
          var _files = []
          res.data.forEach(item => {
            if (item.type === 0) {
              _dirs.push(item)
            } else {
              _files.push(item)
            }
          })
          this.dirs = _dirs.sort((a, b) => { return (a.name < b.name) ? -1 : (a.name > b.name) ? 1 : 0 })
          this.files = _files.sort((a, b) => { return (a.name < b.name) ? -1 : (a.name > b.name) ? 1 : 0 })
        } else {
          console.log(res)
          alert(res.data || 'error')
          window.sessionStorage.removeItem('password')
          window.history.back()
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.dir-container,
.file-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.title {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 10px 7px 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid;
}
.dir, .file {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  margin: 4px 0px;
  padding: 0px 10px;
}
.img-name-block {
  cursor: default;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.img-name-block img {
  margin-right: 5px;
}
</style>
